import React, { useEffect, useState } from 'react'
import { Empty, Button, NavBar  } from 'react-vant';
import { Recommendlist, CarList, Selectone, Selectall,Updatenum, DEL  } from '../../axios';
import { SwipeCell, Flex, Image, Typography, Checkbox, SubmitBar  } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import './car.css'
import { useSelector } from 'react-redux';
export default function Car() {
  let {userId} = useSelector(state => state.user)
  let [ data,setData ] = useState([])
  let [ catList,setCarList ] = useState([])
  let [ isShow,setIsShow ] = useState(false)
  let [price,setPrices] = useState(0)
  let navigate = useNavigate()
  useEffect(() => {
    Recommendlist().then(res => {
      setData(res.data.data)
    })
    SetCarList()
  },[])
  const SetCarList = () => {
    CarList({userid:userId}).then(res => {
      if(res.data.code === '200' ){
        console.log(res);
        setCarList(res.data.data)
        let a=0
        res.data.data.map(item => {
          if(item.flag){
            a+=item.num * item.originprice
          }
        })
        setPrices(a+'00')
        setIsShow(true)
      }else if(res.data.code === '10020'){
        setCarList([])
        setIsShow(false)
      }
    })
  }
const Submit = () => {
}
const input = (cartid,val) => {
  console.log(cartid,val);
  Selectone({cartid,flag:val}).then(res => {
    // console.log(res);
    if(res.data.code === '200'){
      SetCarList()
    }
  })
}
const inputAll = (val) => {
  console.log(val);
  Selectall({userid:userId,type:val}).then(res => {
    // console.log(res);
    if(res.data.code === '200'){
      SetCarList()
    }
  })
}
const add = (cartid,num) => {
    // console.log(cartid,num);
    Updatenum({cartid,num:num+1}).then(res => {
      // console.log(res);
      if(res.data.code === '200'){
        SetCarList()
      }
    })
}
const rem = (cartid,num) => {
  // console.log(cartid,num);
  Updatenum({cartid,num:num-1}).then(res => {
    // console.log(res);
    if(res.data.code === '200'){
      SetCarList()
    }
  })
}
const del = (cartid) => {
  DEL({cartid}).then(res => {
    if(res.data.code === '200'){
      SetCarList()
    }
  })
}
  return (
    <div>
        <NavBar
          title={`购物车(${catList.length})`}
          leftText="返回"
          onClickLeft={() => navigate(-1) }
        />  
        {!isShow && <Empty description="购物车无内容">
          <Button onClick={() => navigate('/home')} style={{ width: 160,backgroundColor:'rgb(238,10,36)',border:'none' }} round type="primary">
            立即购物
          </Button>
        </Empty>}

        { isShow && <ul className='carlist-box'>
            {
              catList.map(item => {
                return <li key={item.cartid}>
                  <Checkbox checked={item.flag} onChange={val => input(item.cartid,val)} />
                  <SwipeCell
                    rightAction={
                      
                      <Button onClick={() => del(item.cartid)} style={{ height: '100%' }} square type="danger">
                        删除
                      </Button>
                    }
                  >
                    <Flex className="demo-product-card" align="stretch">
                      <Image src={item.img1} className="demo-product-card__img" />
                      <Flex direction="column" justify="between" className="demo-product-card__content">
                        <div>
                          <Typography.Text type="secondary">{item.proname}</Typography.Text>
                        </div>
                        <Flex justify="between" align="center">
                          <Typography.Text strong size="lg">
                            ￥{item.originprice}
                          </Typography.Text>
                          <Typography.Text size="sm" type="secondary">
                            <button className='car-rem' onClick={() => rem(item.cartid,item.num)}>-</button>
                            <span className='car-sum'>{item.num}</span>
                            <button className='car-add' onClick={() => add(item.cartid,item.num)}>+</button>
                          </Typography.Text>
                        </Flex>
                      </Flex>
                    </Flex>
                  </SwipeCell>
                </li>
              })
            }
          </ul>}
      <div className='car-title'>可能你还想要</div>
      <ul className='tj-list'>
        {
          data.map(item => {
            return <li onClick={()=>navigate("/detail/"+item.proid)} key={item.proid}>
                <img className='tj-img' src={item.img1} />
                <p className='tj-desc'>{item.proname}</p>
                <p className='tj-price'>￥{item.originprice}</p>
            </li>
          })
        }
      </ul>

      <SubmitBar
        price={price}
        buttonText="提交订单"
        onSubmit={Submit}
      >
        <Checkbox checked={catList.every(item => item.flag)} onChange={val => inputAll(val)}>全选</Checkbox>
      </SubmitBar>
    </div>
  )
}
